<!--
 * @Author: gyc
 * @Date: 2020-04-24 16:25:28
 * @LastEditTime: 2020-08-25 15:00:03
 * @Description: Nuxt测试版
 -->
<template>
<div class="_head" @mouseleave="noOut">
    <!-- <div class="mo_block"></div> -->
    <div class="mo_head">
        <div class="mo-head-box">
            <div class="mo-logo"></div>
            <div class="mo-group" @click="selectItem">
                <div class="mo-item">
                    <nuxt-link to="/" id="item1" v-bind:class="[this.$route.name =='index'?'select-item':'']">首页</nuxt-link>
                </div>
                <!-- <div class="mo-item">
            <nuxt-link to="/zhuqu" id="item2">主区</nuxt-link>
          </div>-->
                <div class="mo-item">
                    <nuxt-link to="/share" id="item2" v-bind:class="[this.$route.name =='share-theme'?'select-item':'']">分享</nuxt-link>
                </div>
                <div class="mo-item">
                    <nuxt-link to="/anli" id="item3" v-bind:class="[this.$route.name =='anli'?'select-item':'']">安利</nuxt-link>
                </div>
                <div class="mo-item">
                    <nuxt-link to="/test" id="item4">吐槽</nuxt-link>
                </div>
            </div>
        </div>
        <div class="mo-head-box">
            <div class="mo-login" @mouseover="goingOut">
                <span style="margin-right:10px" v-if="isLoginOut && isLogin" @click="loginOut">退出登录</span>
                <nuxt-link to="/login" v-if="!isLogin">
                    <span>登录</span>
                </nuxt-link>
                <nuxt-link to="/user/userInfo" style="height:30px" v-if="isLogin">
                    <img src="/img/logo.png" @click="showAside" />
                </nuxt-link>
            </div>
            <!-- <div class="mo-setting">
          <span>设置</span>
          <Icon type="ios-arrow-down" size="14" style="width:14px" />
        </div>-->
        </div>
    </div>
    <div class="md_head">
        <div class="mo-logo"></div>
        <div class="md_head-right">
            <nuxt-link to="/login" v-if="!isLogin">
                <span>登录</span>
            </nuxt-link>
            <nuxt-link to="/user" v-if="isLogin">
                <img src="/img/logo.png" @click="showAside" />
            </nuxt-link>
            <Icon type="ios-list" size="32" @click="playMenu" />
        </div>
        <div class="md-head-select" v-if="isSelect" @click="selMenu">
            <nuxt-link to="/">
                <div class="head-select-item">首页</div>
            </nuxt-link>
            <nuxt-link to="/share">
                <div class="head-select-item">分享</div>
            </nuxt-link>
            <nuxt-link to="/anli">
                <div class="head-select-item">安利</div>
            </nuxt-link>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: "moHead",
    data() {
        return {
            isLogin: true,
            isSelect: false,
            isAdmin: 0,
            isLoginOut: false,
        };
    },
    beforeMount() {
        if (localStorage.getItem("loginCode") == null) {
            this.$axios.get("/isAuthenticated").then((res) => {
                console.log("request...");
                console.log(res.data, "123123123123");
                this.isAdmin = res.data.isAdmin;
                if (res.data.data) {
                    // let loginUser = res.data.user.username;
                    let loginStuts = loginUser !== null ? true : false;
                    this.isLogin = loginStuts;
                }
            });
        }
    },
    mounted() {
        //是否登录（后续要调整）
        this.isLogin = localStorage.getItem("loginCode") != null ? true : false;
    },
    methods: {
        //选择Menu
        selectItem(e) {
            if (e.target.localName == "a" && !!e.target.id) {
                $(".mo-item").removeClass("select-item");
                // let timer = setTimeout(() => {
                //   $("#" + e.target.id).addClass("select-item");
                //   clearTimeout(timer);
                // }, 100);
                this.$nextTick(() => {
                    $("#" + e.target.id).addClass("select-item");
                });
            }
        },
        playMenu() {
            if (this.isSelect) this.isSelect = false;
            else this.isSelect = true;
        },
        selMenu() {
            this.isSelect = false;
        },
        showAside() {
            // this.$store.commit("showAside");
        },
        goingOut() {
            this.isLoginOut = true;
        },
        noOut() {
            this.isLoginOut = false;
        },
        //退出登录
        loginOut() {
            this.$axios.get("/logout");
            localStorage.removeItem("loginCode");
            this.$router.push("/");
        },
    },
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 720px) {
    .mo_head {
        display: flex;
        background-color: white;
    }

    .md_head {
        display: none;
    }
}

@media screen and (max-width: 720px) {
    .mo_head {
        display: none;
    }

    .md_head {
        display: flex;
    }
}

._head {
    position: relative;
    display: flex;
    transition: all 0.4s ease-in-out;
}

.mo_head {
    // display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 45px;
    justify-content: space-between;
    box-shadow: 0px 0px 6px #efefef;
    z-index: 999;
    transition: all 0.4s ease-in-out;

    .mo-logo {
        width: 100px;
        height: 100%;
        background: url("~assets/img/logo.png") no-repeat;
        background-size: contain;
        margin-left: 20px;
        margin-right: 20px;
    }

    .mo-group {
        display: inherit;
        width: auto;
        height: 100%;

        .mo-item {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 70px;
            height: 100%;
            padding-left: 10px;
            padding-right: 10px;
            box-sizing: border-box;
            cursor: pointer;
            border: 2px solid white;
            transition: all 0.4s ease-in-out;
            color: black;

            &:hover {
                border-bottom-color: black;
            }
        }
    }

    .mo-searbox {
        display: inherit;
        justify-content: center;
        align-items: center;
        width: 320px;
        height: 100%;

        .mo-search {
            width: 260px;
            height: 30px;
            outline: none;
            border: 1px solid black;
            padding: 6px;
        }

        .mo-button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 30px;
            border: 0px solid black;
            outline: none;
            cursor: pointer;
            background-color: black;
        }
    }

    .mo-setting,
    .mo-login {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 100%;
        color: black;
        padding-left: 10px;
        padding-right: 10px;

        span {
            cursor: pointer;

            &:hover {
                color: $gcolor;
            }
        }

        img {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
        }
    }
}

.mo-head-box {
    display: inherit;
}

.md_head {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    background-color: white;
    justify-content: space-between;
    align-items: center;
    z-index: 99;

    .mo-logo {
        width: 100px;
        height: 100%;
        background: url("~assets/img/logo.png") no-repeat;
        background-size: contain;
    }

    .md_head-right {
        display: flex;
        justify-content: center;
        align-items: center;

        a {
            height: 30px;
        }

        img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
    }

    .md-head-select {
        position: absolute;
        width: 120px;
        height: auto;
        right: 0;
        top: 45px;
        background-color: white;
        padding-left: 10px;
        padding-right: 10px;
        box-shadow: 0px 3px 3px #ccc;

        .head-select-item {
            display: flex;
            width: 100%;
            height: 35px;
            justify-content: center;
            align-items: center;
        }
    }
}

.select-item {
    font-weight: 800;
    font-size: 16px;
    color: rgb(255, 87, 115);
}
</style>
